<!-- seach START -->
<div class="seach-wrap">
    <div class="seach-lf">
        <button nz-button nzType="primary" (click)="onOpenModalAdd()" *ngIf="permission.userPermission.has('ihapp:appHotSearch:add')">新增</button>
    </div>

    <div nz-space class="seach-rt">
        <div *nzSpaceItem class="seach-item">
            <label class="seach-label">状态</label>
            <div class="seach-control">
                <nz-select nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.status">
                    <nz-option nzValue="0" nzLabel="未开始"></nz-option>
                    <nz-option nzValue="1" nzLabel="进行中"></nz-option>
                    <nz-option nzValue="3" nzLabel="已结束"></nz-option>
                </nz-select>
            </div>
        </div>

        <div *nzSpaceItem class="seach-item">
            <button nz-button nzType="primary" nzSearch (click)="onQuery()">查询</button>
        </div>
    </div>
</div>
<!-- seach END -->

<main class="app-hot-search-main">
    <nz-table #rowSelectionTable nzShowSizeChanger [nzData]="tableData?.records" [nzShowPagination]="false"
        [nzPageSize]="tableData?.records?.size" [nzLoading]="tableLoading">
        <thead>
            <tr>
                <th nzAlign="center">排序</th>
                <th nzAlign="center" nzWidth="10%">名称</th>
                <th nzAlign="center" nzWidth="20%">标签</th>
                <th nzAlign="center" nzWidth="10%">链接</th>
                <th nzAlign="center" nzWidth="10%">开始时间</th>
                <th nzAlign="center" nzWidth="10%">结束时间</th>
                <th nzAlign="center" nzWidth="10%">状态</th>
                <th nzAlign="center">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of tableData?.records; let i = index">
                <!-- 排序 -->
                <td nzAlign="center">{{ queryForm.pageSize * (queryForm.pageNum - 1) + i + 1 }}</td>
                <!-- 名称 -->
                <td nzAlign="center">{{item.word}}</td>
                <!-- 标签 -->
                <td nzAlign="center">
                    <img *ngIf="item.hPicUrl" nz-image [nzSrc]="item.hPicUrl" class="pic-icon">
                    <span *ngIf="!item.hPicUrl">-</span>
                </td>
                <!-- 链接 -->
                <td nzAlign="center">{{ hurlFilter(item.hUrl) }}</td>
                <!-- 开始时间 -->
                <td nzAlign="center">{{item.beginTime | date: 'yyyy-MM-dd HH:mm:ss' || '-'}}</td>
                <!-- 结束时间 -->
                <td nzAlign="center">{{item.endTime | date: 'yyyy-MM-dd HH:mm:ss' || '-'}}</td>
                <!-- 状态 -->
                <td nzAlign="center" [class]="'font-' + item.status">{{status_to_text(item.status)}}</td>
                <!-- 操作 -->
                <td nzAlign="center" class="td-handle">
                    <button nz-button nzType="text" (click)="onTableMove(item, 'up')" [disabled]="i == 0" *ngIf="permission.userPermission.has('ihapp:appHotSearch:move')">上移</button>
                    <button nz-button nzType="text" (click)="onTableMove(item, 'down')" *ngIf="permission.userPermission.has('ihapp:appHotSearch:move')"
                        [disabled]="i+1 == tableData?.records?.length" class="operate-button">下移</button>
                    <a nz-button nz-button-tdlink nzType="link" (click)="onTableEdit(item)" *ngIf="permission.userPermission.has('ihapp:appHotSearch:edit')">编辑</a>
                    <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?" *ngIf="permission.userPermission.has('ihapp:appHotSearch:delete')"
                        (nzOnConfirm)="onTableDelete(item)">删除
                    </a>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <div class="pagination-box">
        <div class="pagination-template">
            <ng-template #totalTemplate let-total> 共有 {{ tableData.total }} 条 </ng-template>
            <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]" nzShowSizeChanger nzShowQuickJumper
                [nzPageIndex]="queryForm.pageNum" [nzTotal]="tableData.total" [nzShowTotal]="totalTemplate"
                [nzPageSize]="queryForm.pageSize" (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)">
            </nz-pagination>
        </div>
    </div>
</main>

<nz-modal
    [(nzVisible)]="isModalShow"
    [nzTitle]="cacheData.id ? '编辑' : '新增'"
    (nzOnCancel)="onModalClose()"
    [nzFooter]="null"
    [nzStyle]="{ width: '1100px' }">
    <ng-container *nzModalContent>
        <!-- 名称 -->
        <nz-form-item>
            <nz-form-label nzRequired>名称</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input maxlength="8" [(ngModel)]="modalForm.word" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <article class="modal-pic-box">
            <!-- 标签 -->
            <nz-form-item>
                <nz-form-label>标签</nz-form-label>
                <nz-form-control>
                    <nz-upload nzAccept="image/*" nzAction="" nzListType="picture-card" (nzChange)="onModalPreview($event)"
                        [nzShowUploadList]="false">
                        <ng-container *ngIf="!modalForm.hPicUrl">
                            <i class="upload-icon" nz-icon nzType="plus"></i>
                        </ng-container>
                        <img *ngIf="modalForm.hPicUrl" [src]="modalForm.hPicUrl" style="width: 100%" />
                        <i *ngIf="modalForm.hPicUrl" (click)="onDelectImg();$event.stopPropagation();" nz-icon
                            nzType="close" nzTheme="outline" class="delete-icon"></i>
                    </nz-upload>
                </nz-form-control>
            </nz-form-item>
        </article>
        <!-- 跳转方式
        <nz-form-item>
            <nz-form-label nzRequired>跳转方式</nz-form-label>
            <nz-form-control>
                <nz-radio-group [(ngModel)]="modalForm.type" (ngModelChange)="jumpTypeChange($event)">
                    <label
                        *ngFor="let item of typeSet | keyvalue"
                        nzValue="{{item.key}}"
                        nz-radio>
                        {{item.value}}
                    </label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item> -->
        <!-- 链接一
        <nz-form-item [hidden]="modalForm.type == '3'">
            <nz-form-label nzRequired>{{typeSet[modalForm.type] || '链接'}}</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input [(ngModel)]="modalForm.hUrl" (input)="oninputLink($event)"
                    placeholder="请输入{{typeSet[modalForm.type] || '链接'}}" />
            </nz-form-control>
        </nz-form-item> -->

        <!-- 链接 -->
        <nz-form-item>
            <nz-form-label>链接</nz-form-label>
            <nz-form-control nzFlex="400px">
                <nz-select
                    nzShowSearch
                    nzAllowClear
                    nzPlaceHolder="请选择链接"
                    [(ngModel)]="modalForm.hUrl"
                >
                    <ng-container *ngFor="let option of mappingOptions">
                        <nz-option [nzLabel]="option.name" [nzValue]="option.key"></nz-option>
                    </ng-container>
                </nz-select>
                <p *ngIf="modalForm.hUrl" class="mapping-remark">{{ remarkFilter(modalForm.hUrl) }}</p>
            </nz-form-control>
        </nz-form-item>

        <!-- 参数 -->
        <nz-form-item>
            <nz-form-label>参数</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input
                    nz-input
                    placeholder="请输入参数，多个参数用@符号隔开"
                    [(ngModel)]="modalForm.params"
                />
            </nz-form-control>
        </nz-form-item>

        <article class="modal-link-box">
            <!-- 开始时间 -->
            <nz-form-item>
                <nz-form-label nzRequired>开始时间</nz-form-label>
                <nz-form-control nzFlex="400px">
                    <nz-date-picker nzShowTime [(ngModel)]="modalForm.beginTime"></nz-date-picker>
                </nz-form-control>
            </nz-form-item>
            <!-- 结束时间 -->
            <nz-form-item>
                <nz-form-label nzRequired>结束时间</nz-form-label>
                <nz-form-control nzFlex="400px">
                    <nz-date-picker nzShowTime [(ngModel)]="modalForm.endTime">
                    </nz-date-picker>
                </nz-form-control>
            </nz-form-item>
        </article>
        <footer class="app-modal-foot">
            <button nz-button nzType="default" (click)="onModalClose()">取消</button>
            <button nz-button nzType="primary" (click)="onConfirm()">确定</button>
        </footer>
    </ng-container>
</nz-modal>
